import 'package:ceramics/extensions/ab_widget_extensions.dart';
import 'package:ceramics/styles/ab_styles.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ABBoostGift {
  final int coin;
  final String image;
  const ABBoostGift({required this.coin, required this.image});
}

class ABBoostDialog extends StatefulWidget {
  const ABBoostDialog({super.key});
  @override
  State<ABBoostDialog> createState() => _ABBoostDialogState();
}

class _ABBoostDialogState extends State<ABBoostDialog> {
  final _gift = const [
    ABBoostGift(coin: 19, image: 'images/ceramics_54.webp'),
    ABBoostGift(coin: 39, image: 'images/ceramics_33.webp'),
    ABBoostGift(coin: 69, image: 'images/ceramics_27.webp'),
    ABBoostGift(coin: 99, image: 'images/ceramics_16.webp'),
  ];

  ABBoostGift? _selectedGift;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("images/slice_396.webp"),
          fit: BoxFit.fill,
        ),
      ),
      child: ListView(
        padding: const EdgeInsets.only(left: 20, right: 20),
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        children: [
          const SizedBox(height: 60),
          Wrap(
            alignment: WrapAlignment.center,
            spacing: 10,
            runSpacing: 10,
            children: [for (var gift in _gift) _buildGiftItem(gift)],
          ),
          const SizedBox(height: 30),
          TextButton(
            onPressed: () => Get.back(result: _selectedGift),
            style: ButtonStyle(
              shape: MaterialStateProperty.all(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25),
              )),
              // transparent splash
              overlayColor: MaterialStateProperty.all(Colors.transparent),
            ),
            child: Image.asset('images/ceramics_52.webp',height: 50),
          ),
          const SizedBox(height: 40),
        ],
      ),
    );
  }

  Widget _buildGiftItem(ABBoostGift gift) {
    return GestureDetector(
      onTap: () {
        setState(() {
          if (_selectedGift == gift) {
            _selectedGift = null;
          } else {
            _selectedGift = gift;
          }
        });
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
              color: _selectedGift == gift ? ABStyles.darkPink : Colors.transparent,
              width: 2),
          borderRadius: BorderRadius.circular(10),
        ),
        child: _buildItem(gift),
      ),
    );
  }

  Stack _buildItem(ABBoostGift gift) {
    return Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 130,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.grey[100],
              borderRadius: BorderRadius.circular(10),
            ),
          ).paddingOnly(top: 40),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Image.asset(gift.image, height: 100),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.asset('images/ceramics_11.webp', width: 20),
                  Text("${gift.coin}",
                      style: const TextStyle(
                          fontSize: 20,
                          color: ABStyles.darkBlack,
                          fontFamily: "RacingSansOne")),
                ],
              ),
              const SizedBox(height: 10),
            ],
          ),
        ],
      );
  }
}
